<template>
    <div id="changeapply" class="same-change-oldstyle">
        <div class="changeapplywrap">
            <div class="same-head-box" style="padding:0px">
                <div class="saem-seat-box">
                    <div class="saem-seat-left">
                        <span>当前位置：</span>
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item>水卡管理</el-breadcrumb-item>
                            <el-breadcrumb-item>普通水卡</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/virtualCardList' }">水卡</el-breadcrumb-item>
                            <el-breadcrumb-item>编辑</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <div class="saem-seat-right">
                        <button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
                        <button class="same-search-btns" @click="returnBack">返回</button>
                    </div>
                </div>
            </div>
            <form action="" method="post" class="formwrap">
                <div class="items">
                    <span class="lable">水卡卡号</span>
                    <input type="text" name="card_number" disabled="disabled" v-model="card_number"
                        placeholder="请输入水卡卡号" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">用户姓名</span>
                    <input type="text" name="full_name" v-model="full_name" placeholder="请输入姓名" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">手机号码</span>
                    <input type="number" name="tel" v-model="tel" maxlength="11" placeholder="请输入手机号码" />
                    <span class="icons">*</span>
                </div>
                <div class="items">
                    <span class="lable">身份证号</span>
                    <input type="text" name="IDcard" v-model="IDcard" placeholder="请输入证件号码" />
                    <span class="icons"></span>
                </div>
                <div class="items">
                    <span class="lable">所属园区</span>
                    <!-- <input type="text" name="village_name" v-model="village_name" placeholder="请输入园区名称" /> -->
                    <el-select v-model="village_name" placeholder="请选择园区" @change="chooseVillage">
                        <el-option v-for="item in village" :key="item.id" :label="item.village_name" :value="item.id">
                        </el-option>
                    </el-select>
                    <!--<el-autocomplete class="inline-input" name="village_name" v-model="village_name" :fetch-suggestions="querySearch" placeholder="请输入园区名称" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>-->
                    <span class="icons">*</span>
                </div>
                <div class="items">
                    <span class="lable">地址信息</span>
                    <!--
                    <el-select v-model="province_id" placeholder="请选择省份" @change="chooseProvince">
                      <el-option v-for="item in Province" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-select v-model="city_id" placeholder="请选择城市" @change="chooseCity">
                      <el-option v-for="item in City" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    <el-select v-model="area_id" placeholder="请选择区县" @change="chooseArea">
                      <el-option v-for="item in Area" :key="item.id" :label="item.name" :value="item.id">
                      </el-option>
                    </el-select>
                    -->
                    <input type="text" name="address" v-model="address" placeholder="请输入详细地址" style="width: 300px"
                        disabled />

                    <input type="text" name="address_two" v-model="address_two" placeholder="门牌号：如：D座12-2"
                        style="width: 300px" />
                    <span class="icons"></span>
                </div>

                <!--         <div class="items">
                          <div class="itemsbot">
                            <span class="lable">充值金额</span>
                            <input style="width:200px!important;" disabled="disabled" type="number" name="valueprice" v-model="valueprice" placeholder="请输入充值金额" />
                            <span class="icons">*(数字)</span>
                          </div>
                        </div>
                        <div class="items">
                          <div class="itemsbot">
                            <span class="lable">押金</span>
                            <input type="number" name="deposit" v-model="deposit" placeholder="押金" disabled="disabled" />
                            <span style="margin-left: 13px;">元</span>
                            <span class="icons">(数字)</span>
                          </div>
                        </div>
                        <div class="items">
                          <div class="itemsbot">
                            <span class="lable">办理状态</span>
                            <el-select v-model="valuetype" placeholder="请选择" style="width: 100px" disabled="disabled">
                              <el-option v-for="item in selected" :key="item.value" :label="item.label" :value="item.value">
                              </el-option>
                            </el-select>
                            <span class="icons"></span>
                          </div>
                        </div> -->
                <el-button type="primary" @click="submitForm()" size="medium">提 交</el-button>
                <!-- <button type="button" class="subbtn" @click="submitForm()">提交</button> -->
            </form>
        </div>
    </div>
</template>
<script>
    import { regionDataPlus } from 'element-china-area-data'
    export default {
        name: 'changeapply',
        data: function () {
            return {
                options: regionDataPlus,
                full_name: '', // 姓名
                idNum: '',//id
                tel: '', // 电话
                IDcard: '', // 身份证
                address: '', // 地址
                address_two: '', // 门牌号
                village_name: '', // 园区名字
                village: [], // 园区名字
                card_number: '', // 水卡卡号
                deposit: '', // 押金
                selected: [{
                    value: '已领卡',
                    label: '已领卡'
                }, {
                    value: '未领卡',
                    label: '未领卡'
                }, {
                    value: '缺水卡',
                    label: '缺水卡'
                }],
                selectedPrice: [{
                    value: '0',
                    label: '0'
                }, {
                    value: '50',
                    label: '50'
                }, {
                    value: '100',
                    label: '100'
                }, {
                    value: '200',
                    label: '200'
                }],
                valuetype: '',//locache.get('verification') ? locache.get('verification').audit_status : '',
                valueprice: '', //locache.get('verification')?locache.get('verification').valueprice:'',
                // 三级联动
                Province: [],
                City: [],
                Area: [],
                province_id: '',
                city_id: '',
                area_id: '',
                province_name: '',
                city_name: '',
                area_name: '',
                state2: '',
                list_village: [], //获取园区列表
                data_info: []
            }
        },
        // 初始化运行
        created: function () {
            // this.getProvince(); // 获取省地址
            this.cardDeposit();
            this.getVillage();
            var id = this.$route.query.id;
            this.idNum = this.$route.query.id;
            this.getInfo(id);//获取用户信息
        },
        inject: ['reload'],
        methods: {
            RefreshFun() {
                // 调用reload方法，刷新整个页面
                this.reload()
            },
            //返回
            returnBack() {
                this.$router.back(-1);
            },
            getInfo(id) {
                var that = this;
                that.$post({
                    url: "Partner/WaterCard/getWaterCardAudit",
                    data: {
                        water_id: id,
                    },
                    success: (data) => {
                        if (data.code == 1000) {
                            that.data_info = data.data;
                            that.province_id = data.data.province;
                            that.full_name = data.data.full_name;
                            that.card_number = data.data.card_number;
                            that.tel = data.data.tel;
                            that.IDcard = data.data.IDcard;
                            that.village_name = data.data.village_name;
                            that.address = data.data.address;
                            that.address_two = data.data.address_two;
                            //获取城市
                            that.$post({
                                url: 'Common/Common/getCity',
                                data: { id: data.data.province },
                                success: (data) => {
                                    if (data.code == 1000) {
                                        that.City = data.data;
                                        that.city_id = that.data_info.city;
                                    } else {
                                        //this.$message.error(data.message);
                                    }
                                }

                            })
                            //获取区域
                            that.$post({
                                url: 'Common/Common/getArea',
                                data: { id: data.data.city },
                                success: (data) => {
                                    if (data.code == 1000) {
                                        that.Area = data.data;
                                        that.area_id = that.data_info.area;
                                    } else {
                                        //this.$message.error(data.message);
                                    }
                                }
                            })
                            //过滤状态
                        } else {
                            this.$message({
                                type: 'error',
                                showClose: true,
                                message: '请求失败或无数据',
                                center: true
                            });
                        }
                    }
                    //
                })
            },
            querySearch(queryString, cb) {
                var that = this;
                var n_rray = [];
                that.$post({
                    url: 'Partner/WaterCard/get_village',
                    data: { village_name: queryString },
                    success: (data) => {
                        if (data.code == 1000) {
                            var danew = data.data;
                            that.list_village = danew;
                            for (var i = 0; i < danew.length; i++) {
                                var obj = {};
                                obj.value = danew[i].village_name;
                                obj.address = danew[i].address;
                                n_rray.push(obj);
                            }
                            // 调用 callback 返回建议列表的数据
                            cb(n_rray);
                        } else {
                            this.$message.error(data.message);
                        }
                    }
                })

            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelect(item) {
                var that = this;
                that.village_name = item.value;
                var list_village = that.list_village;
                var ind_i = '';
                for (var i = 0; i < list_village.length; i++) {
                    if (list_village[i].village_name == item.value) {
                        ind_i = i;
                    }
                }
                that.province_id = list_village[ind_i].province;
                that.address = list_village[ind_i].address;
                // that.province_name =list_village[ind_i].province_name;
                // console.log('省',that.province_id)
                /*
                //获取城市
                that.$post({
                    url: 'Common/Common/getCity',
                    data: { id: that.province_id },
                    success: (data) => {
                        if (data.code == 1000) {
                            that.City = data.data;
                            that.city_id = list_village[ind_i].city;
                        } else {
                            //this.$message.error(data.message);
                        }
                    }

                })
                //获取区域
                that.$post({
                    url: 'Common/Common/getArea',
                    data: { id: list_village[ind_i].city },
                    success: (data) => {
                        if (data.code == 1000) {
                            that.Area = data.data;
                            that.area_id = list_village[ind_i].area;
                        } else {
                            //this.$message.error(data.message);
                        }
                    }
                })
                */


            },
            // 三级联动-省
            cardDeposit() {
                var that = this;
                this.$post({
                    url: 'Common/Common/cardDeposit',
                    data: {},
                    success: (data) => {
                        that.deposit = data.data;
                    }
                })
            },
            getVillage() {
                this.$post({
                    url: 'Partner/WaterCard/getPartnerVillage',
                    data: {},
                    success: (data) => {
                        this.village = data.data;
                    }
                })
            },
            getProvince() {
                this.$post({
                    url: 'Common/Common/getProvince',
                    data: {},
                    success: (data) => {
                        this.Province = data.data;
                    }
                })
            },
            // 三级联动-市
            getCity(id) {
                this.$post({
                    url: 'Common/Common/getCity',
                    data: { id: id },
                    success: (data) => {
                        this.City = data.data;
                    }
                })
            },
            // 三级联动-区/县
            getArea(id) {
                this.$post({
                    url: 'Common/Common/getArea',
                    data: { id: id },
                    success: (data) => {
                        this.Area = data.data;
                    }
                })
            },
            // 园区
            chooseVillage(val) {
                var that = this;
                // 循环获取选中的地址
                $.each(that.village, function (k, v) {
                    if (v.id == val) {
                        that.village_name = v.village_name;
                    }
                });
                this.$post({
                    url: 'Partner/WaterCard/get_village',
                    data: { village_name: that.village_name },
                    success: (data) => {
                        if (data.code > 0) {
                            that.address = data.data[0].province_name + data.data[0].city_name + data.data[0].area_name + data.data[0].address
                        } else {
                            this.$message.error(data.message);
                        }
                    }
                })
            },
            // 省改变
            chooseProvince(val) {
                var that = this;
                // 循环获取选中的地址
                $.each(that.Province, function (k, v) {
                    if (v.id == val) {
                        that.province_name = v.name;
                    }
                });
                this.getCity(val);
                this.city_id = '';
                this.area_id = '';
            },
            // 市改变
            chooseCity(val) {
                var that = this;
                // 循环获取选中的地址
                $.each(that.City, function (k, v) {
                    if (v.id == val) {
                        that.city_name = v.name;
                    }
                });
                this.getArea(val);
                this.area_id = '';
            },
            // 区/县改变
            chooseArea(val) {
                var that = this;
                // 循环获取选中的地址
                $.each(that.Area, function (k, v) {
                    if (v.id == val) {
                        that.area_name = v.name;
                    }
                });
                this.baidu = that.province_name + that.city_name + that.area_name;
            },
            handleChange(value) {

            },
            // 水卡申请提交
            submitForm() {

                var that = this;
                var id_id = that.idNum;
                var full_name = that.full_name; // 姓名
                var tel = that.tel; // 电话
                var IDcard = that.IDcard; // 身份证
                var province = that.province_id; // 省
                var city = that.city_id; // 市
                var area = that.area_id; // 区
                var address = that.address;// 地址
                var address_two = that.address_two;
                var village_name = that.village_name; // 园区名字
                var card_number = that.card_number; // 水卡卡号
                var valueprice = that.valueprice; //充值金额
                var deposit = that.deposit; // 押金
                var audit_status = that.valuetype; // 办理状态
                // 判断数据是否为空
                // if (full_name == '') {
                //   this.$message.error('用户姓名不能为空');
                //   return false;
                // } else if (tel == '') {
                //   this.$message.error('电话号码不能为空');
                //   return false;
                // }else if(IDcard==''){
                //  this.$message.error('身份证号不能为空');
                //  return false;
                // }
                // } else if (province == '') {
                //   this.$message.error('省分信息不能为空');
                //   return false;
                // } else if (city == '') {
                //   this.$message.error('城市信息不能为空');
                //   return false;
                // } else if (area == '') {
                //   this.$message.error('区域信息不能为空');
                //   return false;
                // } else if (village_name == '') {
                //   this.$message.error('园区名称不能为空');
                //   return false;
                // } else if (card_number == '') {
                //   this.$message.error('水卡信息不能为空');
                //   return false;} else
                // if (tel == '') {
                //   this.$message.error('电话号码不能为空');
                //   return false;
                // }
                // else if (valueprice == '') {
                //   this.$message.error('充值金额不能为空');
                //   return false;
                // } else if (valueprice < 0) {
                //   this.$message.error('充值金额不能小于零');
                //   return false;
                // }
                // else if (deposit == '') {
                //   this.$message.error('押金不能为空');
                //   return false;
                // } else if (audit_status == '') {
                //   this.$message.error('办理状态不能为空');
                //   return false;
                // }

                that.$post({
                    url: 'Partner/WaterCard/editWaterCardAudit',
                    data: { village_name: village_name, card_number: card_number, full_name: full_name, tel: tel, IDcard: IDcard, address: address, province: province, city: city, area: area, water_id: id_id, address_two: address_two },
                    success: (data) => {
                        if (data.code == 1000) {
                            this.$message.success('修改成功');
                            that.$router.push({ path: '/virtualCardList' });
                        } else {
                            this.$message.error(data.message);
                        }
                    }

                })

            }
        },
        mounted() {

        },
        watch: {

        }
    }

</script>
<style type="text/css">
    .my-autocomplete {
        li {
            line-height: normal;
            padding: 7px;

            .name {
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .addr {
                font-size: 12px;
                color: #b4b4b4;
            }

            .highlighted .addr {
                color: #ddd;
            }
        }
    }

    #changeapply .changeapplywrap {
        padding: 0 42px;
    }

    .topBreadcrumb {
        font-size: 16px;
        display: flex;
        align-items: center;
        padding: 30px 0;
        border-bottom: 1px solid #cdcdcd;
    }

    .topBreadcrumb .el-breadcrumb__inner {
        font-size: 16px;
        font-weight: normal;
    }

    #changeapply .items {
        font-size: 14px;
        display: flex;
        align-items: center;
        margin-bottom: 18px;
    }

    #changeapply .items .lable {
        width: 70px;
        font-weight: bold;
    }

    #changeapply .items .icons {
        color: #9e383b;
        margin-left: 13px;
    }

    #changeapply .items input {
        border: 1px solid #cccccc;
        padding: 13px 9px;
        border-radius: 5px;
    }

    #changeapply .formwrap {
        margin-top: 30px;
    }

    #changeapply .formwrap .el-input__inner {
        border: 1px solid #cccccc;
        border-radius: 5px;
        height: 43px;
        font-size: 14px;
        width: 270px;
    }

    #changeapply .itemsbot .el-input__inner {
        border: 1px solid #cccccc;
        border-radius: 5px;
        height: 43px;
        font-size: 14px;
        /* width: 100px !important; */
    }

    #changeapply .itemsbot {
        display: flex;
        align-items: center;
        margin-right: 60px;
    }

    #changeapply .itemsbot input {
        width: 100px !important;
    }

    #changeapply .itemsbot .el-input {
        width: 100px
    }

    #changeapply .itemsbot select {
        border: 1px solid #cccccc;
        padding: 13px 9px;
        border-radius: 5px;
    }

    #changeapply .subbtn {
        background-color: #2c5586;
        border: none;
        border-radius: 5px;
        color: #fff;
        font-weight: bold;
        padding: 13px 25px;
        cursor: pointer;
    }

    #changeapply .el-input__inner {
        height: 43px;
    }
</style>